<template>
  <ul class="foot-nav">
    <router-link v-for="item in navList" :to="item.path" tag="li" :key="item.title">
      <span :class="['iconfont', item.icon]"></span>
      <h3>{{item.title}}</h3>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: 'FootNav',
  data () {
    return {
      navList: [{
        path: '/home',
        icon: 'icon-shouye',
        title: '首页'
      }, {
        path: '/kind',
        icon: 'icon-xianxingtubiaozhizuomoban-36',
        title: '分类'
      }, {
        path: '/cart',
        icon: 'icon-gouwuche',
        title: '购物车'
      }, {
        path: '/mine',
        icon: 'icon-wode',
        title: '我的'
      }]
    }
  }
}
</script>

<style lang="scss">
.foot-nav{
  height: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #efefef;
  li{
    height: 100%;
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span{
      font-size: 0.3rem;
    }
    h3{
      font-size: 0.13rem;
      line-height: 0.13rem;
      margin-top: 0.02rem;
    }
    &.router-link-active{
      span,h3{
        color: #ff65ab;
      }
    }
  }
}
</style>
